iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

給自己學習30天重新認識css系列 第 4

img圖片標籤基本語法

  • 分享至 

  • xImage
  •  

img標籤語法使用在html的加入圖片的語法

需要注意地方是,img不需要做閉合標籤的動作

常見不用閉合標籤:<br><meta><link><hr><img>
這些標籤都不用閉合標籤動作。


使用相對路徑方式抓取檔案中的header.png
下篇會講解相對路徑及絕對路徑基本知識

範例:

     <img src="header.png" alt="logo" width="202" height="42" title="logo">

https://ithelp.ithome.com.tw/upload/images/20210919/20140764FmO5rM2RVD.png

img標籤常用的屬性 (attributes)

src
指定圖片位址(URL),這個屬性是最重要的,可以使用絕對路徑及相對路徑基本知識。

alt
圖片替代文字,當圖片無法顯示時,瀏覽器會使用文字方式顯示,對SEO優化非常幫助的屬性。

title
滑鼠提示文字,會自動顯示文字,這可以幫助身心障礙人士使用閱讀程式瀏覽網頁便利性。

width
能夠指定圖片的寬度用途,圖片可以依照設定的值,這點對瀏覽器的優化幫助很大提升。

height
能夠指定圖片的高度用途,圖片可以依照設定的值,這點對瀏覽器的優化幫助很大提升。

以下是圖片標籤常用的基本用法

參考資料:
HTML 圖片 標籤 (tag)
不需要閉合標籤的語法


上一篇
h1~h6標題基礎用法
下一篇
絕對路徑及相對路徑
系列文
給自己學習30天重新認識css16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言